<script setup lang="ts">
import { useLayoutConfigStore } from '@/store/layoutConfig'

const Logo = defineAsyncComponent(() => import('./Logo.vue'))
const VerticalMenu = defineAsyncComponent(() => import('./VerticalMenu.vue'))

const layoutConfigStore = useLayoutConfigStore()
const { isCollapse } = storeToRefs(layoutConfigStore)
// transition ease-in-out delay-100
</script>

<template>
  <div class="h-full">
    <el-aside class="h-full flex flex-col items-center justify-center"
      :class="isCollapse ? 'w-60px transition ease-in-out duration-.3s' : 'w-210px transition ease-in-out duration-.3s'">
      <Logo></Logo>
      <VerticalMenu></VerticalMenu>
    </el-aside>
  </div>
</template>

<style scoped lang="scss"></style>